<template>
  <div class="notic_shade flex-center">
    <div class="notic_box">{{msg}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: "GHUI",
        flag: true
      }
    },
    methods: {
      msgev() {},
    },
    mounted() {
      setTimeout(() => {
        this.$el.remove()
      }, 1500)
    }
  }
</script>

<style scoped="scoped">
  .notic_shade {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .notic_box {
    padding: .15rem .4rem;
    color: white;
    background: rgba(0, 0, 0, .6);
    border-radius: 5px;
    z-index: 9;
    animation: notictr .5s;
  }

  @keyframes notictr {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
</style>
